import React from 'react';
import { useRef } from 'react'
import useTitle from '../../hooks/useTitle';
import { useHistory } from "react-router-dom";
import './index.css';
import axios from 'axios';
import HOST from '../../utils/const';
function Register() {
  useTitle(Register.title);


  const password = useRef(null);
  const username = useRef(null);

  const history = useHistory()
// eslint-disable-next-line
  function gotoIndex(){
    history.push('/index')
  }
// eslint-disable-next-line
  function gotoLogin(){
    history.push('/login')
  }

  function register(){
    const psw = password.current.value;
    const usn = username.current.value;
    axios.get(HOST+`/method/register?username=${usn}&password=${psw}`).then((res)=>{
      switch (res.data) {
        case 'code=2\n': {
          alert('用户名已存在');
          break;
        }
        case 'code=1\n' :{
          alert('注册成功请登录');
          gotoLogin();
          break;
        }
        default: {
          alert('未知错误');
          break;
        }
      }
    }).catch((err)=>{
      console.log(err);
    })
  }
  return (
    <div className='register-box'>
            <div className='inputframe'>
        <div>
        <div className='login-topbar'>
          <div className='topbar-sign'>注册</div>
        </div>
        <div className='devide-line'></div>
        </div>
        <div className='two-input'>
        <div className='username'>
        <div className='sign'>账号:</div>
          <input type="text" id='username' ref={username} className='input-f'  placeholder='请输入账号'/>
        </div>
        <div className='password'>
          <div className='sign'>密码:</div>
          <input type="password" id='password' ref={password} className='input-f' placeholder='请输入密码'/>
        </div>
        </div>
        <div className='button-box'>
        <button className='login-button' onClick={register}>
          注册
        </button>
        </div>
      </div>
    </div>
  );
}

Register.path = '/register';
Register.title = '注册';
Register.meta = {
    keywords:
      '注册',
    description:
      '宠物医院 学习知识 账号注册' 
  };
Register.exact = true;

export default Register;
